{% extends 'base.html' %}

{% block title %}
    问答详情
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename='css/detail.css') }}">
{% endblock %}


{% block body %}
    <div class="row mt-3">
        <div class="col"></div>
        <div class="col-8" style="background-color: #fff;padding: 20px;">
            <h3 class="page-title">{{ question.title }}</h3>
            <div class="question-info">
                <span>作者:{{ question.author.username }}</span>
                <span>时间:{{ question.create_time }}</span>
            </div>
            <hr>
            <div class="question-content">{{ question.content }}</div>
            <hr>
            <h3>评论({{ question.answers|length }})</h3>
            <form action="{{ url_for('qa.answer',question_id=question.id) }}" method="post">
                <div class="form-group">
                    <input type="text" placeholder="请填写评论" name="content" class="form-control">
                </div>
                <div class="form-group debugger">
                    {% for message in get_flashed_messages() %}
                        <div class="text-danger">{{ message }}</div>
                    {% endfor %}

                </div>
                <div class="form-group" style="text-align: right">
                    <button class="btn btn-primary">评论</button>
                </div>

            </form>

            <ul class="comment-group">
                {% for answer in question.answers %}
                    <li>
                        <div class="user-info">
                            <div>
                                <img src="{{ url_for('static',filename='images/头像.jpg') }}" alt="">
                                <span class="username">{{ answer.author.username }}</span>
                            </div>
                            <div>
                                <span class="create-time">{{ answer.create_time }}</span>
                            </div>
                        </div>
                        <p class="comment-content">{{ answer.content }}</p>
                    </li>
                {% endfor %}
            </ul>


        </div>

        <div class="col"></div>

    </div>
{% endblock %}